<template>
  <div class="quoted-message-container">
    <div class="quoted-message">

      <div class="media-content" v-if="[3, 6, 7].indexOf(this.quotedMessage.messageContent.type) >= 0">
        <p> {{ this.quotedMessage._from._displayName + ':' }} </p>
        <img :src="mediaSrc" alt=""
             @click="onMessageClick">
      </div>
      <div v-else-if="enableMessagePreview && this.quotedMessage.messageContent.type === 1" class="other-content">
        <tippy
            :to="'messagePreview' + this.message.messageId + this.quotedMessage.messageId + enableMessagePreview"
            interactive
            :animate-fill="false"
            placement="left"
            distant="7"
            theme="light"
            animation="fade"
            trigger="click"
        >
          <PreviewMessageView :message="quotedMessage"/>
        </tippy>
        <p
            :name="'messagePreview' + this.message.messageId  + this.quotedMessage.messageId + enableMessagePreview">
          {{ this.quotedMessageStr }}
        </p>
      </div>
      <p v-else
         @click="onMessageClick">
        {{ this.quotedMessageStr }}
      </p>
    </div>
    <i v-if="showCloseButton" @click="cancelQuoteMessage" class="icon-ion-close"></i>
  </div>
</template>

<script>
import store from "@/store";
import MessageContentType from "@/wfc/messages/messageContentType";
import Message from "@/wfc/messages/message";
import PreviewMessageView from "@/ui/main/conversation/message/PreviewMessageView";

export default {
  name: "QuoteMessageView",
  props: {
    showCloseButton: {
      type: Boolean,
      required: false,
      default: false,
    },
    // 原始消息
    message: {
      type: Message,
      required: false,
    },
    // 被引用的消息
    quotedMessage: {
      type: Message,
      required: true,
    },
    quotedMessageDigest: {
      type: String,
      required: false,
      default: '',
    },
    enableMessagePreview: {
      type: Boolean,
      required: false,
      default: false,
    }
  },

  data() {
    return {
      shareConversation: store.state.conversation,
    }
  },
  methods: {
    cancelQuoteMessage() {
      this.$emit('cancelQuoteMessage')
    },

    onMessageClick() {
      if (!this.enableMessagePreview) {
        return;
      }
      if (this.quotedMessage) {
        switch (this.quotedMessage.messageContent.type) {
          case MessageContentType.Video:
          case MessageContentType.Image:
            store.previewMessage(this.quotedMessage, false);
            break;
          case MessageContentType.Text:
            // do nothing
            break;

          default:
            // TODO
            console.log('TODO: preview quotedMessage')
            break

        }
      }
    }
  },
  computed: {
    quotedMessageStr() {
      let str = '';
      if (this.quotedMessage) {
        str = this.quotedMessage._from._displayName + ':';
        if ([MessageContentType.Image, MessageContentType.Video, MessageContentType.Sticker].indexOf(this.quotedMessage.messageContent.type) < 0) {
          str += this.quotedMessage.messageContent.digest(this.quotedMessage);
        }
      } else {
        str = this.quotedMessageDigest;
      }
      return str;
    },
    mediaSrc() {
      let src;
      let msgCnt = this.quotedMessage.messageContent;
      src = msgCnt.thumbnail ? 'data:video/jpeg;base64,' + msgCnt.thumbnail : msgCnt.remotePath;
      return src;
    }
  },
  components: {
    PreviewMessageView,
  }
}

</script>

<style lang="css" scoped>
.quoted-message-container {
  display: flex;
  align-items: center;
}

.quoted-message {
  display: flex;
  max-width: 100%;
  background-color: #e7e7e7;
  border-radius: 5px;
  padding: 5px 10px;
  margin-right: 10px;
}

.other-content p {
  max-width: 100%;
  max-height: 50px;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  outline: none;
}

.media-content {
  max-width: 100%;
  display: flex;
  flex-direction: row;
}

.media-content p {
  width: 100px;
  max-height: 50px;
  max-width: 100px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.quoted-message img {
  margin-left: 10px;
  border-radius: 3px;
  max-width: 100px;
  max-height: 100px;
}

</style>
